<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
		<link rel="stylesheet" type="text/css" href="../css/pullToRefresh.css"/>
		<link rel="stylesheet" type="text/css" href="../css/scrollToTop.css"/>
	</head>

	<body>
		<!--返回顶部-->
		<a id="scrollToTop" class="backTop hide">
		    <i class="iconfont">&#xe602;</i>
		</a>
		<!--下拉刷新容器-->
		<div class="mui-content">
			<div class="mui-scroll-wrapper" id="pullrefresh">
	            <div class="mui-scroll" id="scroll-main">
					<div class="mui-slider" id="banner">
						<div class="mui-slider-group mui-slider-loop mui-hidden">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<!--<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="../images/banner/5.jpg" id="lastbanner">
								</a>
							</div>
							<!-- 第一张 
							<div class="mui-slider-item" id="banner1">
								<a href="#">
									<img src="../images/banner/1.jpg">
								</a>
							</div>
							<!-- 第二张 
							<div class="mui-slider-item" id="banner2">
								<a href="#">
									<img src="../images/banner/2.jpg">
								</a>
							</div>
							<!-- 第三张 
							<div class="mui-slider-item" id="banner3">
								<a href="#">
									<img src="../images/banner/3.jpg">
								</a>
							</div>
							<!-- 第四张 
							<div class="mui-slider-item" id="banner4">
								<a href="#">
									<img src="../images/banner/4.jpg">
								</a>
							</div>
							<!-- 第五张 
							<div class="mui-slider-item" id="banner5">
								<a href="#">
									<img src="../images/banner/5.jpg">
								</a>
							</div>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) 
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="../images/banner/1.jpg" id="firstbanner">
								</a>
							</div>
						</div>-->
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>
					<div class="mui-slider" id="classarea">
						<div class="mui-slider-group">
							<!-- 第一页 -->
							<div class="mui-slider-item class-items-area">
								<div class="class-items" id="1">
									<img src="../images/png/banjia.png" />
									<span class="classtext">
										搬家
									</span>
								</div>
								<div class="class-items" id="2">
									<img src="../images/png/baomu.png" />
									<span class="classtext">
										保姆
									</span>
								</div>
								<div class="class-items" id="3">
									<img src="../images/png/weixiu.png" />
									<span class="classtext">
										维修
									</span>
								</div>
								<div class="class-items" id="4">
									<img src="../images/png/paizhao.png" />
									<span class="classtext">
										跟拍
									</span>
								</div>
								<div class="class-items" id="5">
									<img src="../images/png/hunqing.png" />
									<span class="classtext">
										婚庆
									</span>
								</div>
								<div class="class-items" id="6">
									<img src="../images/png/songcanyuan.png" />
									<span class="classtext">
										送餐
									</span>
								</div>
								<div class="class-items" id="7">
									<img src="../images/png/fuwuyuan.png" />
									<span class="classtext">
										服务员
									</span>
								</div>
								<div class="class-items" id="8">
									<img src="../images/png/huichangbuzhi.png" />
									<span class="classtext">
										会场布置
									</span>
								</div>
							</div>
	
							<!-- 第二页 -->
							<div class="mui-slider-item  class-items-area">
								<div class="class-items" id="9">
									<img src="../images/png/siyizhuchang.png" />
									<span class="classtext">
										司仪驻唱
									</span>
								</div>
								<div class="class-items" id="10">
									<img src="../images/png/liyimote.png" />
									<span class="classtext">
										礼仪模特
									</span>
								</div>
								<div class="class-items" id="11">
									<img src="../images/png/chuandanpaifa.png" />
									<span class="classtext">
										传单派发
									</span>
								</div>
								<div class="class-items" id="12">
									<img src="../images/png/youdidailian.png" />
									<span class="classtext">
										游戏代练
									</span>
								</div>
								<div class="class-items" id="13">
									<img src="../images/png/daijia.png" />
									<span class="classtext">
										代驾
									</span>
								</div>
								<div class="class-items" id="14">
									<img src="../images/png/daigou.png" />
									<span class="classtext">
										代购
									</span>
								</div>
								<div class="class-items" id="15">
									<img src="../images/png/tongchengpaotui.png" />
									<span class="classtext">
										同城跑腿
									</span>
								</div>
								<div class="class-items" id="16">
									<img src="../images/png/gengduobangban.png" />
									<span class="classtext">
										更多帮办
									</span>
								</div>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>
					<!--<div class="services">
						<h3 class="services-title" id="services">
							热门服务
							<span class="mui-pull-right">
								更多<span class="mui-icon mui-icon-arrowright"></span>
							</span>
						</h3>
						<div class="mui-row full-row">
							<img src="../images/artshow/yinyuejie.jpg" id="2"/>
						</div>
						<div class="mui-row">
							<div class="mui-col-xs-3">
								<img src="../images/artshow/zhuchang.jpg" id="4"/>
							</div>
							<div class="mui-col-xs-3">
								<img src="../images/artshow/yanchanghui.jpg" id="1"/>
							</div>
							<div class="mui-col-xs-3">
								<img src="../images/artshow/peixun.jpg" id="13"/>
							</div>
							<div class="mui-col-xs-3">
								<img src="../images/artshow/daiyan.jpg" id="16"/>
							</div>
						</div>
					</div>-->
					<div class="recommend">
						<h3 class="recommend-title">推荐帮办</h3>
						<ul class="mui-table-view" id="recommend-list">
							<li class="mui-table-view-cell mui-media" id="aaa">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
									<div class="mui-media-body">
										<p class="artist-title">
											<span class="artist-name">金池</span>
											<span class="artist-price">￥50000</span>
										</p>
										<div class="artist-describe mui-ellipsis-2">
											毕业于黑龙江工程学院，长期从事于数学方面工作。可以进行一对一家教。
										</div>
										<p class="artist-others">
											<span class="fans"><i class="iconfont">&#xe669;</i><span class="fans-count">9999</span></span>
											<span class="info"><span class="artist-address">重庆</span> | 已成交<span class="deal-count">722</span>笔</span>
										</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/scrollToTop.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.plusReady(function() {
				var pullRefresh;
				var artistFilter = Common.defaultArtistFilter;
				var artshowFilter = Common.defaultArtshowFilter;
				var indexPage = plus.webview.getLaunchWebview();
				$(document).scroll(function() {
					var scrollTop = $(this).scrollTop();
					// TODO 顶部导航滚动监听
				})

				// 点击进入热门服务页
				mui('.services').on('tap', '#services', function() { 
					Common.openWindow('services-list.html');
				})
				var artistList = document.getElementById("recommend-list");

				var lazyLoad = mui(artistList).imageLazyload({
					placeholder: '../images/holder1.png',
					autoDestroy: false
				});
				
		        mui('.mui-scroll-wrapper').scroll({
		            bounce: false,
		            indicators: true, //是否显示滚动条
		            deceleration: 0.05
		        });
		        
		        mui.ready(function() {
		            // 初始化下拉刷新，上拉加载。
		            pullRefresh = mui('#scroll-main').pullToRefresh({
		                down: {
		                    callback: pulldownRefresh
		                },
		                up: {
		                    callback: pullupRefresh
		                }
		            });
		        });
		        
		        // 第一次进入页面加载列表
		        pullRefresh.pullDownLoading();
		        
				// 首页加载完成关闭启动页面
				plus.navigator.closeSplashscreen();

				// 点击艺人分类进入艺人列表页
				mui('.class-items-area').on('tap', '.class-items', function() {
					plus.nativeUI.showWaiting();
					artistFilter.type = Number(this.id);
					plus.storage.setItem('artistFilter', JSON.stringify(artistFilter));
					//mui.toast('set storage' + plus.storage.getItem('artistFilter'));
					setTimeout(function() {
						plus.nativeUI.closeWaiting();
						mui.fire(indexPage, 'goTab', {
							targetTab: 　 'artist',
							type : 'artistFilter'
						})
					}, 500)
				})
				
				// 点击演艺分类进入演艺列表页
				mui('.services').on('tap', 'img', function() {
					plus.nativeUI.showWaiting();
					artshowFilter.type = Number(this.id);
					plus.storage.setItem('artshowFilter', JSON.stringify(artshowFilter));
					//mui.toast('set storage' + plus.storage.getItem('artshowFilter'));
					setTimeout(function() {
						plus.nativeUI.closeWaiting();
						mui.fire(indexPage, 'goTab', {
							targetTab: 　 'artshow',
							type : 'artshowFilter'
						})
					}, 500)
				})
				
				/**
				 * 动态加载banner轮播图
				 */
//				function createBanner(homePic) {
//					var first = document.getElementById("firstbanner");
//					var last = document.getElementById("lastbanner");
//					var bannerstr = '';
//					var indicatorstr = '';
//					for(var i = 0; i < homePic.length; i++) {
//						if(i == 0) {
//							first.src = baseURL + homePic[i].picPath;
//							indicatorstr += '<div class="mui-indicator mui-active"></div>';
//						} else if(i == homePic.length) {
//							last.src = baseURL + homePic[i].picPath;
//						} else {
//							bannerstr += '<div class="mui-slider-item" id="' + homePic[i].id + '">';
//							bannerstr += '<a href="#"><img src="' + homePic[i].picPath + '"></a></div>';
//							$(last).parent('.mui-slider-item').after(bannerstr);
//							indicatorstr += '<div class="mui-indicator"></div>';
//						}
//					}
//					$("#banner").find('mui-slider-indicator').html(indicatorstr);
//				}

				var viewPage = 1; // 当前显示推荐艺人页数
				/**
				 * 下拉刷新具体业务实现
				 */
				function pulldownRefresh() {
					viewPage = 1;
					var url = baseURL + 'base/home.json';
					console.log(url);
					Common.ajax({
						url : url
					}, function(data) {
						/*createBanner(data.homePic);*/
						artistList.innerHTML = '';
						console.log(JSON.stringify(data));
						var list = data.artist || data;
						for(var i = 0; i < list.length; i++) {
							//var headSrc = baseURL + 'static/user/' + id + '/head_portrait.png';
							var headSrc = Common.artistPic + list[i].id + '.jpg?' + Math.random();
							createRecommendArtistsList(list[i].id, list[i].stageName, headSrc, (list[i].minSalary / 100).toFixed(0),
								list[i].specialty, list[i].fanNum, list[i].address, list[i].completeNum);
						}
						lazyLoad.refresh(true);
					}, function(xhr) {
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
					setTimeout(function() {
						pullRefresh.endPullDownToRefresh(); //refresh completed
					}, 500)
					pullRefresh.refresh(true); // 重新激活上拉加载
				}

				/**
				 * 上拉加载具体业务实现
				 */
				function pullupRefresh() {
					var url = baseURL + 'base/home/artist/'+ (++viewPage) +'.json';
					console.log(url);
					Common.ajax({
						url : url
					}, function(data) {
						console.log(JSON.stringify(data));
						pullRefresh.endPullUpToRefresh((data.length == 0)); //参数为true代表没有更多数据了。
						for(var i = 0; i < data.length; i++) {
							// var headSrc = baseURL + 'static/user/' + id + '/head_portrait.png';
							var headSrc = Common.artistPic + data[i].id + '.jpg?' + Math.random();
							createRecommendArtistsList(data[i].id, data[i].stageName, headSrc, (data[i].minSalary / 100).toFixed(0),
								data[i].specialty, data[i].fanNum, data[i].address, data[i].completeNum);
						}
						lazyLoad.refresh(true);
					}, function(xhr) {
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						pullRefresh.endPullUpToRefresh(true);
					})
				}
					
				/**
				 * @param {Object} id			艺人id
				 * @param {Object} name			艺人姓名
				 * @param {Object} src			艺人头像路径
				 * @param {Object} price		艺人价格
				 * @param {Object} describe		艺人描述
				 * @param {Object} fansCount	粉丝数量
				 * @param {Object} address		艺人所在城市
				 * @param {Object} dealCount	成交数量
				 */
				function createRecommendArtistsList(id, name, src, price, describe, fansCount, address, dealCount) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-media';
					li.id = id;
					var liStr = '<a href="javascript:;"><img class="mui-media-object mui-pull-left" data-lazyload="' + src + '">';
					liStr += '<div class="mui-media-body"><p class="artist-title"><span class="artist-name">' + name + '</span>';
					liStr += '<span class="artist-price">' + (price ? '￥' + price : '面议') + '</span>';
					liStr += '</p><div class="artist-describe mui-ellipsis-2">' + describe + '</div><p class="artist-others">';
					liStr += '<span class="fans"><i class="iconfont">&#xe669;</i><span class="fans-count">' + fansCount + '</span></span>';
					liStr += '<span class="info"><span class="artist-address">' + address + '</span> | 已成交<span class="deal-count">';
					liStr += dealCount + '笔</span></p></div></a>';
					li.innerHTML = liStr;
					artistList.appendChild(li);
				}

				// 轮播图3秒切换
				var slider = mui("#banner");
				slider.slider({
					interval: 3000
				});
				
//				// 点击轮播图片进入活动详情
//				mui(slider).on('tap', '.mui-slider-item', function() {
//					mui.toast(this.id);
//				})

				// 点击进入艺人详情
				mui(artistList).on('tap', '.mui-table-view-cell', function(e) {
					plus.nativeUI.showWaiting();
					var id = this.getAttribute('id');
					Common.openWindow('artist-workroom.html',{artistId: this.id});
				});
			})
		</script>
	</body>

</html>